<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            text-align: center;
        }
        #box1{
            width: 200px;
            height: 200px;
            background: #333;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="button" value="变宽" id="btn1">
        <input type="button" value="变高" id="btn2">
        <input type="button" value="变色" id="btn3">
        <input type="button" value="隐藏" id="btn4">
        <input type="button" value="重置" id="btn5">
        <div id="box1"></div>
    </div>
</body>
</html>
<script>
    var oBtn1 = document.getElementById("btn1");
    var oBtn2 = document.getElementById("btn2");
    var oBtn3 = document.getElementById("btn3");
    var oBtn4 = document.getElementById("btn4");
    var oBtn5 = document.getElementById("btn5");
    var oBox1 = document.getElementById("box1");
    //变宽
    oBtn1.onclick = function () {
        oBox1.style.width = "400px";
    };
    //变高
    oBtn2.onclick = function () {
        oBox1.style.height = "400px";
    };
    //变色
    oBtn3.onclick = function () {
        oBox1.style.background = "red";
    }
    //隐藏
    oBtn4.onclick = function () {
        oBox1.style.display = "none";
    }
    //重置
    oBtn5.onclick = function () {
        oBox1.style.width = "200px";
        oBox1.style.height = "200px";
        oBox1.style.background = "#000";
        oBox1.style.display = "block";
    }
</script>